<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ButtonVue from '../button/button1.vue';
import { useTestStore } from '@/stores/test.js'
import jwt_decode from "jwt-decode";
import { ElMessage } from 'element-plus'

const store = useTestStore()

const router = useRouter()
const cardInfo = ref('')
const isMsgShow = ref(false)
const open = (msg) => {
    ElMessage(msg)
}
onMounted(() => {
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get('http://192.168.110.221:8080/user/queryAccountCredDetailsController', {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
            accountNumber: store.accountNumber
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                cardInfo.value = resp.data.datas
            } else {
                open(resp.data.msg)
            }
        })
        .catch((e) => {
            console.log(e);
            alert("出现了一些意料之外的错误")
        })
})
function unBound() {
    let token = jwt_decode(localStorage.getItem("token"))
    if (token == null) {
        token = jwt_decode(localStorage.getItem("longToken"))
    }
    axios.get("http://192.168.110.221:8080/user/unbindCardController", {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
            userNumber: token.userNumber,
            accountNumber: store.accountNumber
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                open(resp.data.msg)
                router.push("/card-bound")
            } else {
                open(resp.data.msg)
            }
        })
}
</script>

<template>
    <div class="container">
        <div v-if="cardInfo != null" class="box">

            <h2>信用卡账户信息</h2>
            <div class="info-box">
                <li>
                    <span>审批额度</span>
                    <p>{{ cardInfo.approvedLimit }}</p>
                </li>
                <li>
                    <span>取现额度</span>
                    <p>{{ cardInfo.cashAdvanceLimit }}</p>
                </li>
                <li>
                    <span>已用额度</span>
                    <p>{{ cardInfo.usedLimit }}</p>
                </li>
                <li>
                    <span>账户金额</span>
                    <p>{{ cardInfo.availableLimit }}</p>
                </li>
            </div>

            <ButtonVue btn-name="取消绑定当前账户" btn-color="red" @click="isMsgShow = true"></ButtonVue>
        </div>
    </div>
    <div v-if="isMsgShow" class="message-box">
        <p>确认取消绑定吗</p>
        <div>
            <button class="msg-cancel" @click="isMsgShow = false">取消</button>
            <button class="msg-confirm" @click="unBound">确认</button>
        </div>
    </div>
    <div class="back_box" v-if="isMsgShow">
    </div>
</template>
<style scoped>
* {
    margin: 0;
    list-style: none;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    top:50px;
    left: 0;
    background-color:  rgb(241, 240, 240);
}
.back_box {
    position: fixed;
    width: calc(100vh);
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 20;
    top: 0;
}

.message-box {
    padding: 10px;
    z-index: 21;
    width: 70%;
    height: 100px;
    position: fixed;
    top: 40%;
    left: calc(12%);
    background-color: #fff;
}

.message-box p {
    float: left;
    text-align: center;
    color: #a09d9d;
    font-size: 20px;
}

.message-box div {
    padding: 5px 0;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 30%;
    height: 30px;
}

.msg-cancel {
    margin-right: 20px;
}

.message-box div button {
    width: 30%;
    height: 30px;
    float: left;
    border: transparent;
    border-radius: 2px;
}

.msg-confirm {
    background-color: #0278FE;
    color: #fff;
}

.box {
    padding-top: 10px;
    padding-bottom: 1px;
    /* margin-top: 60px; */
    background-color: rgb(241, 240, 240);
}

h2 {
    margin: 0px 10px 10px;
    font: normal 400 16px 'Serif';
}

.info-box {
    margin: 0 10px 10px;
    background-color: #fff !important;
}

.info-box::after {
    display: block;
    content: "";
    clear: both;
}

li {
    width: 100%;
    border-top: 1px solid lightgray;
}

li::after {
    display: block;
    content: "";
    clear: both;
}

span,
p {
    padding: 5px
}

span {
    float: left;
    width: 26%;
    color: rgb(128, 127, 127);
    text-indent: 12px;
}

p {
    float: right;
    width: 64%;
    color: rgb(19, 173, 224);
}</style>